<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#id1{
				width: 100px;
				height: 100px;
				border: 1px skyblue solid;
			}
		</style>
	</head>
	<body>
		<div id="id1" class="styDiv1">
			第一个DIV
		</div>
		<div id="id2" class="styDiv2">
			第二个DIV
			<p>000</p>
			<p>111</p>
			<p>222</p>
			<p>333</p>
			<p>444</p>
		</div>
		<div id="id3" class="styDiv3">
			第三个DIV
			<ul>
				<li name='fruit'>苹果</li>
				<li name='fruit'>香蕉</li>
				<li name='fruit'>橘子</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//ID选择器
		var obj1=document.getElementById('id1')
		console.log(obj1)
		//类选择器
		var obj2=document.getElementsByClassName('styDiv2')
		console.log(obj2)
		//标签选择器
		var obj3=document.getElementsByTagName('div')
		console.log(obj3)
	</script>
</html>
